<template>
  <div class="login-container">
      <div class="login-panel">
        <h3>vue-elementplus-admin</h3>
        <el-form :model="form" ref="loginForm" :rules="formRules">
            <el-form-item prop="username">
                <el-input  v-model="form.username" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="form.code" class="captcha-code"></el-input>
                <div class="captcha-svg"  @click="getImgCode" v-html="imgSvg"></div>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="rememberme">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%" :loading="loading" @click="loginFunc">登录</el-button>
            </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script lang="ts" >
import {Router} from "vue-router"
import { defineComponent,reactive,ref,getCurrentInstance} from "vue"
import {captcha,login} from "@/api/login"
import { setToken } from "@/utils/store"
export default defineComponent({
    name:"login",
    setup(props){
        console.log(props)
        const REMEMBER_KEY = "remembermeInfo"
        const ctx: any = getCurrentInstance()
        const router: Router= ctx?.root?.ctx?.$router
        const form = reactive({
            username:"",
            password:"",
            code:"",
            codeKey:""
        })
        const formRules = reactive({
            username:[
                {required:true,message:"用户名不能为空",trigger:'blur'}
            ],
            password:[
                {required:true,message:'密码不能为空',trigger:'blur'}
            ],
            code:[
                {required:true,message:'验证码不能为空'}
            ]
        })
        const loading = ref(false)
        const imgSvg = ref("")
        const getImgCode = async ()=>{
           const res: any =await captcha()
           console.log(res)
           form.codeKey = res.data.key
           imgSvg.value = res.data.svg
           console.log(imgSvg)
        }
        const loginForm = ref<any>(null);
        const rememberme = ref(false)
        const remembermeInfoStr = localStorage.getItem(REMEMBER_KEY)
        if(remembermeInfoStr){
            const remembermeInfo = JSON.parse(remembermeInfoStr)
            form.username = remembermeInfo.username
            form.password = remembermeInfo.password
            rememberme.value = true
        }
        const loginFunc = ()=>{
            console.log(ctx)
            loginForm.value.validate((valid: boolean)=>{
                if(!valid){
                    return
                }
                if(rememberme.value){
                    const remembermeInfo ={
                        username:form.username,
                        password:form.password,
                        rememberme:true
                    }
                    localStorage.setItem(REMEMBER_KEY,JSON.stringify(remembermeInfo))
                }else{
                    localStorage.removeItem(REMEMBER_KEY)
                }
                loading.value = true
                login(form).then(res=>{
                    loading.value = false
                    console.log(res)
                    router.push({
                        path:"/layout"
                    })
                    setToken(res.data.token)
                }).catch(()=>{
                    getImgCode()
                })
            })
        }
        getImgCode()
        return {
            form,
            imgSvg,
            getImgCode,
            formRules,
            loginFunc,
            loading,
            loginForm,
            rememberme
        }
    }
})
</script>
<style lang="scss">
.login-container{
     position: absolute;
     top:0;
     left: 0;
     right: 0;
     bottom: 0;
     background:url(../../assets/images/login-bg.jpg) no-repeat center;
     background-size: 100% 100%;
     .login-panel{
         padding: 20px 30px;
         width: 350px;
         height: 350px;
         background: #fff;
         border-radius: 5px;
         position: absolute;
         top:50%;
         left: 50%;
         transform: translate(-50%,-50%);
         h3{
             text-align: center;
             font-size: 18px;
             margin-bottom: 20px;
         }
         .captcha-code{
             width: 57%;
             margin-right: 10px;
         }
         .captcha-svg{
             width: 40%;
             display: inline-block;
             height: 40px;
             vertical-align: middle;
         }
     }
}
</style>